<!doctype html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 信息 -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <title>工具——在线HTTP请求</title>
    <meta name="author" content="尘跃" />
    <meta name="description" content="工具——在线HTTP请求" />

    <!-- Facebook Open Graph -->
    <meta property="og:site_name" content="" />
    <meta property="og:title" content="工具——在线HTTP请求" />
    <meta property="og:type" content="website" />
    <meta
      property="og:url"
      content="http://cyue.net/pages/tool/http-request.html"
    />
    <meta property="og:image" content="http://cyue.net/favicon.png" />
    <meta
      property="og:description"
      content="工具——在线HTTP请求"
    />

    <!-- Twitter Cards -->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:image" content="http://cyue.net/favicon.png" />
    <meta name="twitter:title" content="工具——在线HTTP请求" />
    <meta
      name="twitter:description"
      content="工具——在线HTTP请求"
    />
    <meta name="twitter:creator" content="@尘跃" />
    <meta name="twitter:site" content="@cyue.net" />

    <!-- style -->
    <link rel="stylesheet/less" type="text/css" href="/css/style.less" />
    <!-- less -->
    <script src="/js/third/less.min.js"></script>

    <!-- highlight -->
    <link rel="stylesheet" href="/css/third/highlight.min.css" />
    <script src="/js/third/highlight.min.js"></script>

    <!-- website configuration -->
    <script src="/js/configuration.js"></script>
    <!-- 百度统计 -->
    <script src="/js/tongji.js"></script>
    <!-- Google ADS -->
    <!-- <meta name="google-adsense-account" content="ca-pub-7556556693775855">
    <script src="/js/ads.js"></script> -->

    <style>
      #app {
        display: flex;
        flex-direction: column;
        gap: 1em;
      }

      main {
        box-sizing: border-box;
        padding: 1rem;
      }

      h1 {
        margin-bottom: 0.5em;
      }

      button,
      .button {
        margin-top: 5px;
      }

      .container-target {
        font-size: var(--font-size-large);
        display: flex;
        flex-direction: column;
        gap: 0.5em;
      }

      .container-target * {
        font-size: inherit;
      }

      .panel-data {
        background-color: rgba(176, 176, 40, 0.03);
        font-size: var(--font-size-small);
        border: 2px solid var(--color-primary);

        box-sizing: border-box;
        margin: auto;
        padding: 0.5em;
        width: 100%;
        min-height: 10rem;
        max-height: 20rem;

        overflow: auto;
        text-align: left;

        display: flex;
      }
      .panel-data > * {
        width: 100%;
      }
      @media (min-width: 45rem) {
        .panel-data {
          font-size: var(--font-size-medium);
        }
      }

      .panel-data-textarea {
        resize: none;
        background-color: #f3f3f3;
        width: 100%;

        box-sizing: border-box;
        padding: 0.5em;
        font-size: inherit;
      }
      .panel-data-textarea[disabled] {
        filter: brightness(0.95);
      }
    </style>
  </head>
  <body>
    <!-- <header>
        <div class="flex-row flex-items-center" style="flex: 1;;height: 100%;gap: 0.5rem;">
            <a class="icon" href="/index.html"></a>
            <h2 class="header-title">在线HTTP请求</h2>
        </div>
        <div class="wrapper-nav flex-row flex-items-center">
            <nav>
                <ul class="flex-column flex-items-center">
                    <li>
                        <a href="/pages/other.html">其他</a>
                    </li>
                    <li>
                        <a href="/pages/tool.html">工具</a>
                    </li>
                    <li>
                        <a href="/pages/sort.html">分类</a>
                    </li>
                    <li>
                        <a href="/pages/search.html">搜索</a>
                    </li>
                    <li>
                        <a href="/pages/about.html">关于</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header> -->

    <page-header></page-header>

    <div class="block-spacer"></div>
    <main id="app">
      <h1>在线HTTP请求</h1>
      <div class="container-target" style="width: 100%">
        <div class="flex-row flex-items-center">
          <span>方法：</span>
          <select name="select-method" id="select-method">
            <option value="GET">GET</option>
            <option value="POST">POST</option>
            <option value="PUT">PUT</option>
            <option value="PATCH">PATCH</option>
            <option value="DELETE">DELETE</option>
          </select>
        </div>

        <div class="flex-row flex-items-center flex-wrap">
          <span>URL：</span>
          <div class="flex-row flex-items-center" style="flex: 1">
            <input
              type="url"
              name=""
              id=""
              value=""
              placeholder="http(s)://example.com"
              pattern="http(s)?://.*"
              style="flex: 1"
            />
            <span style="margin: 0 0.5em"></span>
          </div>
          <button onclick="clickRequest()" style="cursor: pointer">请求</button>
        </div>
      </div>

      <div class="container-request" style="width: 100%">
        <h2>Request</h2>
        <div class="panel-data" placeholder="输入 JSON 文本">
          <textarea
            class="panel-data-textarea"
            name=""
            id=""
            disabled
          ></textarea>
        </div>
      </div>

      <div class="container-response" style="width: 100%">
        <h2>Response</h2>
        <div class="panel-data">
          <pre><code style="max-height: 18rem;text-overflow: initial;"></code></pre>
        </div>
      </div>
    </main>

    <page-footer></page-footer>

    <!-- web component -->
    <script src="/js/component.js"></script>
    <!-- style -->
    <script src="/js/style.js"></script>

    <script src="/js/third/beautify-html.min.js"></script>
    <script src="/js/http.js"></script>
    <script src="/js/dialog.js"></script>
    <script>
      const selectElement = document.getElementsByTagName("select")[0];
      /** @type { HTMLInputElement } */
      const inputElement = document.querySelector("input[type=url]");
      const textareaElement = document.querySelector("textarea");
      const codeElement = document.querySelector("code");

      selectElement.addEventListener("change", (e) => {
        if (selectElement.value === "GET") {
          textareaElement.disabled = true;
        } else {
          textareaElement.disabled = false;
        }
      });

      function clickRequest() {
        const url = inputElement.value;
        if (!url) {
          alert("请求URL为空");
          return;
        }
        if (!inputElement.checkValidity()) {
          alert("URL不合法");
          return;
        }

        let data = undefined;
        try {
          if (selectElement.value !== "GET")
            data = JSON.parse(textareaElement.value);
        } catch (e) {
          alert("JSON格式错误");
          return;
        }

        const serverRequest = () => {
          HTTP.request({
            method: "POST",
            url: "/api/tool/http",
            data: {
              url: url,
              method: selectElement.value,
              headers: (function () {
                return selectElement.value !== "GET"
                  ? { "Content-Type": "application/json;charset=UTF-8" }
                  : undefined;
              })(),
              data: data,
            },
          })
            .then((response) => {
              // cyue.net 的 response
              const result = response.data;
              if (result.type === "success") {
                let finalResult = undefined;
                if (result.data instanceof Object)
                  finalResult = JSON.stringify(result.data, null, "  ");
                else if (typeof result.data === "string")
                  finalResult = result.data
                    .replaceAll("<", "&lt")
                    .replaceAll(">", "&gt");
                else finalResult = result.data;

                codeElement.className = "";
                codeElement.innerHTML = finalResult;
                (async () => hljs.highlightAll())();
              } else {
                const errorString = JSON.stringify(result.data, null, "  ");
                Dialog.window(errorString);
              }
            })
            .catch((e) => {
              console.error(e);
            });
        };

        if (
          /(Android)/i.test(navigator.userAgent) ||
          (url.includes(window.location.hostname))
        ) {
          HTTP.request({
            method: selectElement.value,
            url: url,
            data: data,
          })
            .then((response) => {
              // 某网站的 response
              const result = response.data;
              let finalResult = undefined;
              if (result instanceof Object)
                finalResult = JSON.stringify(result, null, "  ");
              else if (typeof result === "string")
                finalResult = result
                  .replaceAll("<", "&lt")
                  .replaceAll(">", "&gt");
              else finalResult = result;

              codeElement.className = "";
              codeElement.innerHTML = finalResult;
              (async () => hljs.highlightAll())();
            })
            .catch((e) => {
              console.error(e);

              let errorString = e;
              if (e instanceof Object)
                errorString = JSON.stringify(e, null, "  ");
              Dialog.window(errorString);
              serverRequest();
            });
        } else {
          serverRequest();
        }
      }
    </script>
  </body>
</html>
